﻿<layout:LayoutableUserControl
    x:Class="LayoutRulesTestApp.Explorer"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppDemo"
    xmlns:layout="using:LayoutHelpers"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="450"
    d:DesignWidth="551">
    <layout:LayoutableUserControl.Resources>
        <local:ExplorerViewProperties x:Key="ExplorerViewProperties"/>
    </layout:LayoutableUserControl.Resources>

    <layout:LayoutableUserControl.LayoutRules>

        <!--These use basic built-in rules. DisplayName is optional but can help with readability / debugging-->
        <layout:WidthUpdatePropertyRule DisplayName="Make buttons smaller" Width="550" ComparisonType="LessThan" Name="ExplorerViewProperties" Property="ButtonSize" Value="50,50" ValueIfFalse="80,80" ValueConverter="{StaticResource SizeConverter}" />
        <layout:WidthUpdatePropertyRule DisplayName="Hide advanced buttons" Width="370" ComparisonType="LessThan" Name="ExplorerViewProperties" Property="ShowAdvanced" Value="Collapsed" ValueIfFalse="Visible" />
        <layout:WidthGoToVisualStateRule DisplayName="Hide details when thin" Width="600" VisualStateName="HideListDetails" VisualStateNameIfFalse="ShowListDetails"/>
        <layout:WidthGoToVisualStateRule DisplayName="Hide advanced when thin" Width="800" VisualStateName="HideListAdvanced" VisualStateNameIfFalse="ShowListAdvanced"/>
        
        
        <layout:HeightGoToVisualStateRule DisplayName="Make text smaller" Height="300" ComparisonType="GreaterThanOrEqualTo" VisualStateName="LargeText" VisualStateNameIfFalse="SmallText"/>

        <!--This uses the 'simple' rule since we want to use an 'or' of two different evaluators.-->
        <!--You could write your own helper rule "WidthOrHeightGoToVisualStateRule" to cover this if it was common-->
        <layoutPrimitives:SimpleRule DisplayName="Show or hide ribbon" xmlns:layoutPrimitives="using:LayoutHelpers.Primitives">
            <layoutPrimitives:CompoundLayoutEvaluator RuleType="Or">
                <layoutPrimitives:WidthLayoutEvaluator Width="190"/>
                <layoutPrimitives:HeightLayoutEvaluator Height="300"/>
            </layoutPrimitives:CompoundLayoutEvaluator>
            <layoutPrimitives:SimpleRule.TrueCommand>
                <layoutPrimitives:GoToVisualStateCommand VisualStateName="HideRibbon"/>
            </layoutPrimitives:SimpleRule.TrueCommand>
            <layoutPrimitives:SimpleRule.FalseCommand>
                <layoutPrimitives:GoToVisualStateCommand VisualStateName="ShowRibbon"/>
            </layoutPrimitives:SimpleRule.FalseCommand>
        </layoutPrimitives:SimpleRule>
    </layout:LayoutableUserControl.LayoutRules>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" x:Name="ribbonRow"/>
            <RowDefinition Height="*" x:Name="contentRow"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" x:Name="listSpeaker"/>
            <ColumnDefinition Width="*" x:Name="listDetails"/>
            <ColumnDefinition Width="*" x:Name="listAdvanced"/>
        </Grid.ColumnDefinitions>

        <Grid.Resources>
            <Style x:Key="NormalButton" TargetType="Border">
                <Setter Property="Background" Value="#FFEEEEEE"/>
                <Setter Property="Margin" Value="10,10,0,10" />
            </Style>

            <Style x:Key="AdvancedButton" TargetType="Border" BasedOn="{StaticResource NormalButton}">
                <Setter Property="Background" Value="DarkGray"/>
            </Style>
        </Grid.Resources>

        <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.ColumnSpan="3" Background="#FF6E6E6E" >
            <Border Style="{StaticResource NormalButton}" Width="{Binding ButtonWidth, Source={StaticResource ExplorerViewProperties}}" Height="{Binding ButtonHeight, Source={StaticResource ExplorerViewProperties}}"/>
            <Border Style="{StaticResource NormalButton}" Width="{Binding ButtonWidth, Source={StaticResource ExplorerViewProperties}}" Height="{Binding ButtonHeight, Source={StaticResource ExplorerViewProperties}}"/>
            <Border Style="{StaticResource AdvancedButton}" Width="{Binding ButtonWidth, Source={StaticResource ExplorerViewProperties}}" Height="{Binding ButtonHeight, Source={StaticResource ExplorerViewProperties}}" Visibility="{Binding ShowAdvanced, Source={StaticResource ExplorerViewProperties}}"/>
            <Border Style="{StaticResource AdvancedButton}" Width="{Binding ButtonWidth, Source={StaticResource ExplorerViewProperties}}" Height="{Binding ButtonHeight, Source={StaticResource ExplorerViewProperties}}" Visibility="{Binding ShowAdvanced, Source={StaticResource ExplorerViewProperties}}"/>
            <Border Style="{StaticResource NormalButton}" Width="{Binding ButtonWidth, Source={StaticResource ExplorerViewProperties}}" Height="{Binding ButtonHeight, Source={StaticResource ExplorerViewProperties}}"/>
            <Border Style="{StaticResource AdvancedButton}" Width="{Binding ButtonWidth, Source={StaticResource ExplorerViewProperties}}" Height="{Binding ButtonHeight, Source={StaticResource ExplorerViewProperties}}" Visibility="{Binding ShowAdvanced, Source={StaticResource ExplorerViewProperties}}"/>
        </StackPanel>
        <ListBox Grid.Row="1" Background="White" Width="120" FontSize="18" x:Name="itemList">
            <ListBoxItem>List Item 1</ListBoxItem>
            <ListBoxItem>List Item 2</ListBoxItem>
            <ListBoxItem>List Item 3</ListBoxItem>
            <ListBoxItem>List Item 4</ListBoxItem>
            <ListBoxItem>List Item 5</ListBoxItem>
            <ListBoxItem>List Item 6</ListBoxItem>
            <ListBoxItem>List Item 7</ListBoxItem>
            <ListBoxItem>List Item 8</ListBoxItem>
            <ListBoxItem>List Item 9</ListBoxItem>
            <ListBoxItem>List Item 11</ListBoxItem>
            <ListBoxItem>List Item 12</ListBoxItem>
            <ListBoxItem>List Item 13</ListBoxItem>
            <ListBoxItem>List Item 14</ListBoxItem>
            <ListBoxItem>List Item 15</ListBoxItem>
            <ListBoxItem>List Item 16</ListBoxItem>
            <ListBoxItem>List Item 17</ListBoxItem>
        </ListBox>
        <ScrollViewer HorizontalScrollMode="Disabled" Grid.Row="1" Grid.Column="1">
            <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="10" ItemWidth="110" Background="Black">
                <TextBlock Text="Item 1" FontSize="22" Margin="20,20,20,0"/>
                <TextBlock Text="Item 2" FontSize="22" Margin="20,20,20,0"/>
                <TextBlock Text="Item 3" FontSize="22" Margin="20,20,20,0"/>
                <TextBlock Text="Item 4" FontSize="22" Margin="20,20,20,0"/>
                <TextBlock Text="Item 5" FontSize="22" Margin="20,20,20,0"/>
                <TextBlock Text="Item 6" FontSize="22" Margin="20,20,20,0"/>
                <TextBlock Text="Item 7" FontSize="22" Margin="20,20,20,0"/>
                <TextBlock Text="Item 8" FontSize="22" Margin="20,20,20,0"/>
                <TextBlock Text="Item 9" FontSize="22" Margin="20,20,20,0"/>
                <TextBlock Text="Item 10" FontSize="22" Margin="20,20,20,0"/>
                <TextBlock Text="Item 11" FontSize="22" Margin="20,20,20,0"/>
                <TextBlock Text="Item 12" FontSize="22" Margin="20,20,20,0"/>
                <TextBlock Text="Item 13" FontSize="22" Margin="20,20,20,0"/>
                <TextBlock Text="Item 14" FontSize="22" Margin="20,20,20,0"/>
                <TextBlock Text="Item 15" FontSize="22" Margin="20,20,20,0"/>
                <TextBlock Text="Item 16" FontSize="22" Margin="20,20,20,0"/>
                <TextBlock Text="Item 17" FontSize="22" Margin="20,20,20,0"/>
                <TextBlock Text="Item 18" FontSize="22" Margin="20,20,20,0"/>
                <TextBlock Text="Item 19" FontSize="22" Margin="20,20,20,0"/>
                <TextBlock Text="Item 20" FontSize="22" Margin="20,20,20,0"/>
            </VariableSizedWrapGrid>
        </ScrollViewer>
        <Grid Grid.Row="1" Grid.Column="2" Background="#FFC22A2A"/>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="RibbonStates">
                <VisualState x:Name="ShowRibbon"/>
                <VisualState x:Name="HideRibbon">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ribbonRow" Storyboard.TargetProperty="Height">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="ListStates">
                <VisualState x:Name="ShowListDetails"/>
                <VisualState x:Name="HideListDetails">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="listDetails" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="ShowListAdvanced"/>
                <VisualState x:Name="HideListAdvanced">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="listAdvanced" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="TextStates">
                <VisualState x:Name="LargeText"/>
                <VisualState x:Name="SmallText">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="itemList" Storyboard.TargetProperty="FontSize">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="12"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</layout:LayoutableUserControl>
